<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8"/>
<title>Calendar demo</title>

<!-- 必要文件：jquery -->
<script src="/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- 必要文件：echarts -->
<script src="/echarts/echarts.min.js"></script>
<!-- ECharts主题(可选，默认为macarons) -->
<script src="/echarts/theme/dark.js"></script>
<script src="/echarts/theme/infographic.js"></script>
<script src="/echarts/theme/macarons.js"></script>
<script src="/echarts/theme/roma.js"></script>
<script src="/echarts/theme/shine.js"></script>
<script src="/echarts/theme/vintage.js"></script>
<!-- 必要文件：echarts.ajax自定义封装 -->
<script src="/echarts/echarts.ajax.js"></script>
<!-- 必要文件：ECharts css样式封装 -->
<style type="text/css">
.echarts {
    height: 460px;
    width: 99%;
    overflow: hidden;
    padding : 10px;
    margin: 10px auto;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
</style>

</head>
<body>
1)基础图表：<br/>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<a id="demo-other-calendar-onclick" href="/echarts/onclick" target="_blank"></a>
<div id="demo-other-calendar"
	style="height:660px"
	class="echarts"
	echarts-type="calendar"
	echarts-title="个人每日花费时间" 
	echarts-subtitle="日历图"
	echarts-theme="macarons"
	echarts-url="/echarts/calendar"
	echarts-onclick-id="demo-other-calendar-onclick"
></div>
<pre>
	id="demo-other-calendar"
	class="echarts"
	echarts-type="calendar"
	echarts-title="个人每日花费时间" 
	echarts-subtitle="日历图"
	echarts-theme="macarons"
	echarts-url="/echarts/calendar"
	echarts-onclick-id="demo-other-calendar-onclick"
</pre>

2)添加工具栏组件：<br/>
<input type="checkbox" name="echarts_toolbox_checkbox"/>
echarts-toolbox="<span id='echarts_toolbox_span'>false</span>"<br/>
<script type="text/javascript">
//工具栏调试
$("input[name='echarts_toolbox_checkbox']").change(echartsToolboxCheckbox)
function echartsToolboxCheckbox(){
	var echarts_toolbox_checkbox = $(this).is(':checked')+'';
	$("#echarts_toolbox_span").html(echarts_toolbox_checkbox);
	$(".echarts").attr("echarts-toolbox",echarts_toolbox_checkbox);
	$(".echarts").dblclick();
}
</script>


3)图表主题切换：<br/>
<select name="theme">
	<option value="dark">dark</option>
	<option value="infographic">infographic</option>
	<option value="macarons" selected="selected">macarons</option>
	<option value="roma">roma</option>
	<option value="shine">shine</option>
	<option value="vintage">vintage</option>
</select><br/>
<script type="text/javascript">
//改变主题下拉框
$("select[name='theme']").change(selectTheme)
function selectTheme(){
	var selectText = $(this).find("option:selected").text(); 
	var selectValue = $(this).val();
	showimg(selectValue);
	$(".echarts").attr("echarts-theme",selectValue);
	$(".echarts").dblclick();
}
//显示主题图片
function showimg(selectValue){
	$("#echarts-theme").attr("src","/echarts/theme/"+selectValue+".png");
}
</script>
<img id="echarts-theme"/>
</body>
</html>